<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*过渡*/
        /*.box1{*/
        /*    height: 271px;*/
        /*    width: 132px;*/
        /*    margin: 0 auto;*/
        /*    background-image: url("./public/bigtap-mitu-queue-big.png");*/
        /*    background-position: 0,0;*/
        /*    transition: all .2s steps(3);*/
        /*}*/
        /*.box1:hover{*/
        /*    background-position: -396px 0;*/
        /*}*/
        @keyframes test {
            /*动画的开始位置 from也可以使用0%表示*/
            from {
                margin-left: 0;
            }
            /*动画的结束位置 to也可以使用100%*/
            to {
                margin-left: 700px;
            }
        }
    </style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
